<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/font/iconfont.css">
</head>

<body>
    <div class="ce">
        <div class="ce-c">
            <h2 class="iconfont icon-wo"></h2>
            <a href="cart.html">
                <h3 class="iconfont icon-gouwuche
        ">购物车<span id="cart-num">0</span></h3>
            </a>
            <h2></h2>
            <h2 class="iconfont icon-zan1"></h2>
            <h2 class="iconfont icon-tuihuodan"></h2>
            <span class="back">回到顶部</span>
        </div>
    </div>
    <div class="header">
        <div class="header_c">
            <ul class="ulleft">
                <li><a href="">欢迎来到聚美！</a></li>
                <li><a href="login.html">请登录</a></li>
                <li><a href="register.html">快速注册</a></li>
            </ul>
            <ul class="ulcenter">
                <li><a href="">正品保证</a></li>
                <li><a href="">订单查询</a></li>
                <li><a href="">收藏的品牌</a></li>
                <li><a href="">我的聚美</a></li>
            </ul>
            <ul class="ulright">
                <li><span>|</span><a href="">手机聚美</a><span>|</span></li>
                <li><a href="">更多</a></li>
            </ul>
        </div>
    </div>
    <div class="logo">
        <h2>
            <img src="../img/logo.png" alt="">

        </h2>
        <div class="logocenter">
            <input type="text" class="search-ipt">
            <button class="search-btn">搜索</button>
            <ul class="search-ul" style="position: absolute;top: 100px;">
            </ul>
            <ul>
                <li><a href="">保湿</a><i>|</i></li>
                <li><a href="">面膜</a><i>|</i></li>
                <li><a href="">洗面奶</a><i>|</i></li>
                <li><a href="">补水</a><i>|</i></li>
                <li><a href="">香水</a><i>|</i></li>
                <li><a href="">眼霜</a><i>|</i></li>
                <li><a href="">口红</a><i>|</i></li>
                <li><a href="">护肤套装</a><i>|</i></li>
                <li><a href="">BB霜</a><i>|</i></li>
            </ul>
        </div>
        <div class="logoright">

            <a href="cart.html"><button><img src="../img/cart.gif" alt="">去购物车结算</button></a>
        </div>
    </div>
    <div class="nav">
        <div class="nav_c">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">极速免税店</a></li>
                <li><a href="">母婴特卖</a></li>
                <li><a href="">美妆商城</a></li>
                <li><a href="">国际轻奢</a></li>
                <li><a href="">服装运动</a></li>
                <li><a href="">鞋包配饰</a></li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <div class="banner_c">
            <img src="../img/banner.png" alt="">
        </div>
    </div>
    <div class="inner">
        <div class="inner_c">
            <dl style="height: 460px;">
                <dt>
                    <img src="../img/5dbf98a76e080_260_260.jpg" alt="">
                </dt>
                <dd>
                    <span class="s1">
                        <img src="../img/list-1.png" alt="">
                    </span>
                    <span class="s2">
                        <p>AHC</p>
                        <p>第七代眼霜到手价</p>
                    </span>
                </dd>
                <a href="item.html"><button>入场疯抢&gt;</button></a>

            </dl>
        </div>
    </div>
</body>

</html>

<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/index2.js"></script>

<script>

    let searchUl = document.querySelector('.search-ul')

    function aaa(res) {
        let html = ''
        for (let i = 0; i < res.g.length; i++) {
            let n = res.g[i]
            html += `<li>${n.q}</li>`

        }
        searchUl.innerHTML = html;

        // 嵌套写法 获取 新创建的 li

        let li = document.querySelectorAll('.search-ul li')
        for (let i = 0; i < li.length; i++) {
            let n = li[i]
            n.onclick = function () {
                input.value = n.innerHTML
            }
        }

    }

    let input = document.querySelector('.search-ipt')

    input.oninput = function () {
        $('.search-ul').show()
        let sc = document.createElement('script')
        sc.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1435,21104,18559,29568,29700,29220,26350,30191&wd=${input.value}&req=2&csor=2&pwd=w&cb=aaa&_=1574922357428`

        document.body.appendChild(sc)
        document.body.removeChild(sc)
    }

    document.onclick = function () {
        searchUl.style.display = 'none'
    }



</script>